<template>
  <div>
<!--    楼栋信息开始-->
    <el-card v-for="(unit,index) in units" :key="index" style="margin-bottom: 10px">
      <el-tag>{{unit.rid}}</el-tag><span style="margin-left: 5px">房屋信息</span>
      <el-button v-if="num==='0'" style="float: right" type="text" @click="removeRoomGx(unit.oid,unit.rid)">房屋解绑</el-button>
      <el-divider></el-divider>

      <el-row style="padding-left: 50px;padding-right: 50px;padding-bottom: 40px" >
        <el-col :span="6">
          <span class="zitiyangshi">楼栋ID:</span> <span class="neirong">{{ unit.fid }}</span>
        </el-col>
        <el-col :span="6">
          <span class="zitiyangshi">单元ID:</span> <span class="neirong">{{ unit.unitId }}</span>
        </el-col>
        <el-col :span="6">
          <span class="zitiyangshi">房屋ID:</span> <span class="neirong">{{unit.rid}}</span>
        </el-col>
        <el-col :span="6">
          <span class="zitiyangshi">楼层:</span> <span class="neirong">{{ unit.layer }} 楼</span>
        </el-col>
      </el-row>
      <el-row style="padding-left: 50px;padding-right: 50px;">
        <el-col :span="6">
          <span class="zitiyangshi">房间数:</span> <span class="neirong">{{ unit.section }}</span>
        </el-col>
        <el-col :span="6">
          <span class="zitiyangshi">厅数:</span> <span class="neirong">{{ unit.apartment }}</span>
        </el-col>
        <el-col :span="6">
          <span class="zitiyangshi">建筑面积:</span> <span class="neirong">{{ unit.builtUpArea }}  ㎡</span>
        </el-col>
        <el-col :span="6">
          <span class="zitiyangshi">迁入时间:</span> <span class="neirong">{{ unit.createTime }}</span>
        </el-col>
      </el-row>
    </el-card>
<!--    楼栋信息结束-->
  </div>
</template>

<script>
import {getOwnerRoomList,removeRoom} from '@/api/village/owner'
export default {
  name: "unitList",
  props:['ownerId','num'],
  data(){
    return{
      units:[],
    }
  },
  created() {
    this.getOwnerRoom()
  },
  methods:{
    removeRoomGx(oid,rid){
      this.$confirm('请在此确认是否解除房屋关系?', '提示', {
        confirmButtonText: '确定解绑',
        cancelButtonText: '点错了',
        type: 'warning'
      }).then(() => {
        removeRoom(oid,rid).then(res => {
          if(res.data){
            this.getOwnerRoom()
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    /**
     * 获取业主房屋信息
     */
    getOwnerRoom(){
      getOwnerRoomList(this.ownerId).then(res =>{
        this.units = res.data
      })
    }
  }
}
</script>

<style scoped>
.zitiyangshi{
  color : #686B6D; /*文字颜色*/
  font-weight:bold; /*文字粗体*/
  font-family : 宋体,sans-serif; /*文字字体*/
  font-size:20px;
  height:36px;
}
.neirong{
  margin: 0 5px;
  color : #999999; /*文字颜色*/
  font-weight:bold; /*文字粗体*/
  font-family : 宋体,sans-serif; /*文字字体*/
  font-size:15px;
  height:36px;
}
</style>
